<template>
    <el-dialog v-model="localVisible" title="添加描述" @close="handleCancel">
        <el-form :model="form">
            <el-form-item label="文本" required style="margin-bottom:20px;">
                <el-input type="textarea" v-model="form.problem" placeholder="请输入文本" ref="inputRef" />
            </el-form-item>
            <el-form-item label="照片" style="margin-bottom:0px;">
                <j-image-upload v-model="form.fileName" bizPath="companyLog" text="请上传照片" isMultiple></j-image-upload>
            </el-form-item>
            <el-form-item label="视频">
                <j-upload v-model="form.pictureName" bizPath="financial"></j-upload>
            </el-form-item>
            <el-form-item label="完成状态" required>
                <el-radio-group v-model="form.nodeState">
                    <el-radio label="0">未开始</el-radio>
                    <el-radio label="2">进行中</el-radio>
                    <el-radio label="1">已完成</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleOk">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import JImageUpload from '@/components/jeecg/JImageUpload';
import JUpload from '@/components/jeecg/JUpload';

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    initial: {
        type: Object,
        default: () => ({})
    }
});

const emit = defineEmits(['ok', 'cancel']);

const localVisible = ref(props.visible);
const form = ref({ ...props.initial });

watch(() => props.visible, (newVal) => {
    localVisible.value = newVal;
    if (newVal) {
        form.value = { ...props.initial };
        nextTick(() => {
            inputRef.value.focus();
        });
    }
});

watch(localVisible, (newVal) => {
    if (!newVal) {
        emit('cancel');
    }
});

const handleOk = () => {
    if (!form.value.problem) {
        return ElMessage.error("请输入文本");
    }
    if (!form.value.nodeState) {
        return ElMessage.error("请选择完成状态");
    }
    emit('ok', form.value);
    handleCancel();
};

const handleCancel = () => {
    emit('cancel');
};

const inputRef = ref(null);
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    .el-form-item__label {
        width: 80px;
        margin-right: 10px;
    }
    .el-form-item__content {
        width: calc(100% - 90px);
    }
}
</style>